// components/common/CardShuffling/CardShuffling.js
import { dumpFunc } from '@src/common/dump'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    stackArrays: {
      type: Array
    },
    a: {
      type: String
    },

  },
  options: {
    multipleSlots: true,
    addGlobalClass: true
  },
  pageLifetimes: {
    show: function () {
      // 页面被展示
    },
  },
  lifetimes: {

    ready() {
      // console.log('stackArrays', this.data.stackArrays);
      this.setData({ showArray: this.data.stackArrays })
      // let datas = this.data.showArray.slice(0, 3);
      console.log('datas', datas)
      let zIndex = datas.length;
      let left = 0;
      let scale = 1;
      for (let i = 0; i < datas.length; i++) {
        datas[i].animation = null;
        datas[i].zIndex = zIndex;
        datas[i].left = left;
        datas[i].scale = scale;
        zIndex = zIndex - 1;
        left = left + 34;
        scale = scale - 0.1
      }
      this.setData({
        showArray: datas,
      })
      this.__set__()
      this.move();
      const that = this;
      let msetInterval = setInterval(() => {
        that.left()
        // var last = that.data.stackArrays.pop(); //获取数组的最后一个
        // that.data.stackArrays.unshift(last); //放到数组的第一个
        // var orderFirst = that.data.order.shift();
        // that.data.order.push(orderFirst);
        // that.move();
      }, 3000)
      this.setData({
        msetInterval
      })
    },
    detached() {
      // 在组件实例被从页面节点树移除时执行;
      console.log("触发detached")
      clearInterval(msetInterval);
      this.setData({ msetInterval: null })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    startX: 0,
    endX: 0,
    iCenter: 3,
    showArray: null,
    msetInterval: null,
    //活跃时的下标
    activeIndex: 0,
    order: [],
    //活跃时的标题
    activeTitle: null,
    //副标题
    activesubhead: null,
    //图片
    activeimg: null
  },

  /**
   * 组件的方法列表
   */
  methods: {
    jumpPage(e) {
      let dump = e.currentTarget.dataset.item.dump
      dumpFunc(dump);
    },
    move: function () {
      var datas = this.data.showArray;
      /*图片分布*/
      for (var i = 0; i < datas.length; i++) {
        var data = datas[i];
        var animation = wx.createAnimation({
          duration: 200
        });
        animation.translateX(data.left).scale3d(data.scale, data.scale, data.scale).step();
        this.setData({
          ["showArray[" + i + "].animation"]: animation.export(),
          ["showArray[" + i + "].zIndex"]: data.zIndex,
          //  ["datas[" + i + "].opacity"]: data.opacity,
        })
      }
      console.log('datas', datas)
      //重新设置活跃时的data
      this.setData({
        activeTitle: datas[0].title,
        activesubhead: datas[0].subTitle,
        activeimg: datas[0].bg,

      })
    },
    /**左箭头 */
    left: function () {
      let activeIndex = this.data.activeIndex;
      let showArray = this.data.showArray;
      let stackArrays = this.data.stackArrays;
      let lastObj;
      if (activeIndex + 3 < stackArrays.length) {
        lastObj = stackArrays[activeIndex + 3];
      } else {
        if (activeIndex == stackArrays.length - 3) {
          lastObj = stackArrays[0];
        } else if (activeIndex == stackArrays.length - 2) {
          lastObj = stackArrays[1]
        }
      }
      showArray.shift();
      showArray.push(lastObj);
      let zIndex = showArray.length;
      let left = 0;
      let scale = 1;
      for (let i = 0; i < showArray.length; i++) {
        showArray[i].animation = null;
        showArray[i].zIndex = zIndex;
        showArray[i].left = left;
        showArray[i].scale = scale;
        zIndex = zIndex - 1;
        left = left + 34;
        scale = scale - 0.1
      }
      this.setData({
        showArray: showArray
      })
      // var last = this.data.stackArrays.pop(); //获取数组的最后一个
      // this.data.stackArrays.unshift(last); //放到数组的第一个
      // var orderFirst = this.data.order.shift();
      //this.data.order.push(orderFirst);
      // console.log("data中的数据", this.data.datas)

      this.move();
      //根据展示数组id查找在strankArray数组的index
      let currentId = showArray[0].id;
      let currentIndex;
      stackArrays.forEach((item, index) => {
        if (item.id == currentId) {
          currentIndex = index
        }
      })
      currentIndex = currentIndex == stackArrays.length - 1 ? -1 : currentIndex
      this.setData({
        activeIndex: currentIndex
      })
    },
    /** */
    // right: function () {
    //   console.log("触发右")
    //   var first = this.data.stackArrays.shift(); //获取数组的第一个
    //   this.data.stackArrays.push(first); //放到数组的最后一个位置

    //   var orderLast = this.data.order.pop();
    //   this.data.order.unshift(orderLast);
    //   this.move();
    // },
    /**点击某项 */
    // choose: function (e) {
    //   var that = this;
    //   var id = e.currentTarget.dataset.id;
    //   var order = that.data.order;
    //   var index = 0;

    //   for (var i = 0; i < order.length; i++) {

    //     if (id == order[i]) {
    //       index = i;
    //       break;
    //     }
    //   }
    //   for (var i = 0; i < index; i++) {
    //     this.data.stackArrays.unshift(this.data.stackArrays.pop()); //获取最后一个放到第一个
    //     this.data.order.push(this.data.order.shift());
    //     // this.left();
    //   }
    //   this.move();

    // },
    /**新的排列复制到新的数组中 */
    __set__: function () {
      var that = this;
      var order = that.data.order;
      var datas = that.data.stackArrays;
      for (var i = 0; i < datas.length; i++) {
        that.setData({
          ["order[" + i + "]"]: datas[i].id
        })
      }
    },
    //手指触发开始移动
    moveStart: function (e) {

      var startX = e.changedTouches[0].pageX;
      this.setData({
        startX: startX
      });
    },
    //手指触摸后移动完成触发事件
    moveItem: function (e) {


      var that = this;
      var endX = e.changedTouches[0].pageX;
      this.setData({
        endX: endX
      });
      //计算手指触摸偏移剧距离
      var moveX = this.data.startX - this.data.endX;
      //向左移动
      if (moveX > 20) {
        this.left();
      }
      if (moveX < -20) {
        // this.right();
      }
    },
  }
})